<template>
    <el-container class="el-container">
        <el-aside width="200px" class="left-aside" :class="{'aside-hidden': isCollapse}">
            <SearchMenu v-if="!isCollapse" />
            <el-menu
                :default-active="selectPath"
                router
                :unique-opened="true"
                :collapse="isCollapse"
                class="el-menu-vertical-demo"
                background-color="#545c64"
                style="padding-bottom: 40px;"
                text-color="#fff"
                active-text-color="#ffd04b">
                <div @click="collapseChagne" class="close-btn">
                    <i class="el-icon-d-arrow-right" v-if="isCollapse"></i>
                    <i class="el-icon-d-arrow-left" v-else></i>
                </div>

                <el-submenu :index="index + '-1'" v-for="(item, index) in sideBarList" :key="index">
                    <template slot="title">
                        <!-- <div :id="item.icon === 'el-icon-user-solid' && 'user-icon'" @click="toPath(item)">
                            <i :class="item.icon"></i>
                            <span>{{ item.name }}</span>
                        </div> -->
                        <div>
                            <i :class="item.icon"></i>
                            <span>{{ item.name }}</span>
                        </div>
                    </template>

                    <el-menu-item-group v-if="item.childrens">
                        <div v-for="(cItem, cIndex) in item.childrens" :key="cIndex">
                            <el-menu-item :index="cItem.path"  v-if="cItem.path">{{ cItem.name }}</el-menu-item>

                            <el-submenu :index="index + '-1-' + cIndex" v-else>
                                <span slot="title">{{cItem.name}}</span>
                                <div v-for="(ccItem, ccIndex) in cItem.childrens" :key="ccIndex">
                                    <el-menu-item :index="ccItem.path" v-if="ccItem.path">{{ccItem.name}}</el-menu-item>
                                    <el-submenu :index="index + '-1-' + cIndex + '-' + ccIndex" v-else>
                                        <span slot="title">{{ccItem.name}}</span>
                                        <el-menu-item v-for="(cccItem, cccIndex) in ccItem.children" :key="cccIndex" :index="cccItem.path">{{cccItem.name}}</el-menu-item>
                                    </el-submenu>
                                </div>
                            </el-submenu>
                        </div>
                    </el-menu-item-group>

                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container class="right-container">
            <el-header class="header">
                <div class="header-left">
                    <BreadCrumb @change="changeSelectPath"/>
                </div>
                <div class="header-right">
                    <span class="change-version" @click="changeVersion"> {{ !versionFlag ? '切换回旧版' : '切换成新版'}}</span>
                    <span class="user-name">欢迎您 <b>{{userInfo.name || ''}}</b></span>
                    <span class="versition">版本：{{_versition}}</span>
                    <span class="login-out" @click="logOut">登出</span>
                </div>
            </el-header>
            <el-main class="main">
                <keep-alive>
                    <router-view v-if="$route.meta.keepAlive"></router-view>
                </keep-alive>
                <router-view v-if="!$route.meta.keepAlive"></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import { getStore, setStore } from '@/utils/utils'
import { mapState } from 'vuex'
import BreadCrumb from './component/breadCrumb'
import SearchMenu from './component/searchMenu'
import { menusData } from './menuData'

export default {
    components: {
        BreadCrumb,
        SearchMenu
    },
    data () {
        return {
            selectPath: '',
            isCollapse: false,
            menuOpen: true,
            userInfo: {},
            versionFlag: 1
        }
    },
    computed: {
        ...mapState({
            'sideBarList': state => state.sideBar.sideBarList
        })
    },
    created () {
        // 如果是非则是 新版
        this.versionFlag = JSON.parse(localStorage.getItem('versionFlag'))
        console.log(this.versionFlag, 'this.versionFlag')
        if (!this.versionFlag) {
            this.getSideMenuList()
        } else {
            this.$store.commit('changeSideBar', menusData);
        }
        this.userInfo = JSON.parse(getStore('userInfo'))
        this.isCollapse = getStore('isCollapse') === 'true'
    },
    mounted() {
    },
    methods: {
        // 切换成新版旧版
        changeVersion() {
            this.versionFlag = this.versionFlag ? 0 : 1
            if (this.versionFlag) {
                localStorage.setItem('versionFlag', 1)
                this.$store.commit('changeSideBar', menusData);
                return
            }
            localStorage.setItem('versionFlag', 0)
            this.getSideMenuList()
        },
        // 获取菜单列表
        async getSideMenuList () {
            let res = await this.$http.post('/account/menus')
            if (res.code === '0') {
                this.$store.commit('changeSideBar', res.data);
                return
            }
            this.$message({
                type: 'error',
                message: '系统异常，请稍后再试'
            })
        },
        toPath(item){
            console.log(item)
            if(item.children) return
            this.$router.push({path: item.path})
        },
        collapseChagne () {
            this.isCollapse = !this.isCollapse
            setStore('isCollapse', this.isCollapse)
        },

        // 切换选中路由
        changeSelectPath (path) {
            this.selectPath = path
        },

        // 登出
        async logOut () {
            if (this.loading) return
            this.loading = true
            let res = await this.$http.post('/account/logout')
            window.localStorage.clear()
            if (res.code === '0') {
                this.$message({
                    type: 'success',
                    message: '登出成功'
                })
            }
            this.$router.replace('/login')
            this.loading = false
        }
    }
}
</script>

<style scoped lang="scss">
    .el-container {
        height: 100%;
        .change-version {
            color: #66b1ff;
            cursor: pointer;
            margin-right: 10px;
        }
        .left-aside {
            height: 100%;
            overflow: hidden;
            .el-menu-vertical-demo {
                overflow-y: auto;
                overflow-x: hidden;
            }
            .close-btn {
                background-color: rgb(84, 92, 100);
                height: 40px;
                font-size: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #ffffff;
                cursor: pointer;
                &:hover {
                    background-color: rgb(68, 74, 79);
                }
            }
            > ul {
                height: 100%;
                border-right: 0;
            }
            /deep/ .el-menu-item-group__title {
                padding: 0;
            }
        }
        .aside-hidden {
            width: 70px!important;
            /deep/ span {
                visibility: hidden!important;
            }
            /deep/ .el-icon-arrow-right {
                visibility: hidden!important;
            }
            // /deep/ .el-menu--collapse {
            //     width: 70px;
            // }
        }

        .right-container {
            min-width: 870px;
            .header {
                display: flex;
                justify-content: space-between;
                font-size: 13px;
                color: #837d7d;
                line-height: 40px!important;
                height: 40px!important;
                border-bottom: 1px solid #cccccc;

                .header-left {
                    display: flex;
                    align-items: center;
                }
                .header-right {
                    .versition {
                        margin: 0 15px;
                    }
                    .login-out {
                        color: #66b1ff;
                        cursor: pointer;
                    }
                }
            }
            .main {
                height: calc(100% - 40px);
                overflow: auto;
                padding: 0;
                > div {
                    padding: 10px 20px;
                }
            }
        }
    }
    // /deep/ .el-submenu__title {
    //     .user-icon > .el-icon-arrow-down {
    //         display: 'none';
    //     }
    // }
</style>
